<template>
  <div class="login">
    <div class="login-box">
      <div class="login-header">
        <div class="login-header-logo"></div>
        <div class="login-header-title">{{ TITLE }}</div>
      </div>
      <div class="login-main">
        <h3 class="login-main-msg">{{ $t('common.account_password') }}</h3>
        <n-form ref="formRef" label-placement="left" :model="formData" :rules="rules">
          <n-form-item path="username">
            <n-input
              v-model:value="formData.username"
              size="large"
              :placeholder="$t('common.please_enter', { name: $t('common.username') })"
              clearable
            />
          </n-form-item>
          <n-form-item path="password">
            <n-input
              v-model:value="formData.password"
              autocomplete
              type="password"
              show-password-on="mousedown"
              size="large"
              :placeholder="$t('common.please_enter', { name: $t('common.password') })"
              clearable
            />
          </n-form-item>
          <n-form-item path="code">
            <n-input
              v-model:value="formData.code"
              size="large"
              :placeholder="$t('common.please_enter', { name: $t('common.captcha') })"
              class="v-code-input"
              @keydown.enter.prevent="handleLogin"
            />
            <n-skeleton v-if="vCodeLoading" class="v-code" />
            <img v-else :src="captcha" alt="" class="v-code" @click="getCaptcha" />
          </n-form-item>
        </n-form>
        <n-button
          :loading="loading"
          color="#536DFE"
          strong
          block
          round
          :disabled="loading"
          type="info"
          size="large"
          @click="handleLogin"
          >{{ $t('common.confirm') }}</n-button
        >
      </div>
    </div>
  </div>
</template>
<script setup lang="tsx">
import { FormInst, FormRules } from 'naive-ui'
import { useI18n } from 'vue-i18n'

import { LoginDto } from '@/apis/auth/type/dto'
import { TITLE } from '@/constants/index'
import { useTabStore } from '@/stores/tab'

import { useCaptcha } from './useCaptcha'
import { useLogin } from './useLogin'

const i18n = useI18n()

const formRef = ref<FormInst | null>(null)
const tabsStore = useTabStore()
const rules: FormRules = {
  username: {
    required: true,
    message: i18n.t('common.username_required'),
    trigger: 'blur',
  },
  password: {
    required: true,
    message: i18n.t('common.password_required'),
    trigger: ['input', 'blur'],
  },
  code: {
    required: true,
    message: i18n.t('common.captcha_required'),
    trigger: ['input', 'blur'],
  },
}

const formData = reactive<LoginDto>({
  username: '',
  password: '',
  code: '',
  uuid: '',
})

const { vCodeLoading, captcha, getCaptcha } = useCaptcha({ formData })
const { loading, handleLogin } = useLogin({ formRef, formData, getCaptcha })

onMounted(() => {
  tabsStore.reset()
  getCaptcha()
})
</script>
<style lang="less" scoped>
@keyframes movement {
  0%,
  100% {
    background-size:
      130vmax 130vmax,
      80vmax 80vmax,
      90vmax 90vmax,
      110vmax 110vmax,
      90vmax 90vmax;
    background-position:
      -80vmax -80vmax,
      60vmax -30vmax,
      10vmax 10vmax,
      -30vmax -10vmax,
      50vmax 50vmax;
  }

  25% {
    background-size:
      100vmax 100vmax,
      90vmax 90vmax,
      100vmax 100vmax,
      90vmax 90vmax,
      60vmax 60vmax;
    background-position:
      -60vmax -90vmax,
      50vmax -40vmax,
      0 -20vmax,
      -40vmax -20vmax,
      40vmax 60vmax;
  }

  50% {
    background-size:
      80vmax 80vmax,
      110vmax 110vmax,
      80vmax 80vmax,
      60vmax 60vmax,
      80vmax 80vmax;
    background-position:
      -50vmax -70vmax,
      40vmax -30vmax,
      10vmax 0,
      20vmax 10vmax,
      30vmax 70vmax;
  }

  75% {
    background-size:
      90vmax 90vmax,
      90vmax 90vmax,
      100vmax 100vmax,
      90vmax 90vmax,
      70vmax 70vmax;
    background-position:
      -50vmax -40vmax,
      50vmax -30vmax,
      20vmax 0,
      -10vmax 10vmax,
      40vmax 60vmax;
  }
}

.login {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  //  background: url('@/assets/images/public/bg.png');
  background-image: radial-gradient(closest-side, rgb(235 105 78 / 100%), rgb(235 105 78 / 0%)),
    radial-gradient(closest-side, rgb(243 11 164 / 100%), rgb(243 11 164 / 0%)),
    radial-gradient(closest-side, rgb(254 234 131 / 100%), rgb(254 234 131 / 0%)),
    radial-gradient(closest-side, rgb(170 142 245 / 100%), rgb(170 142 245 / 0%)),
    radial-gradient(closest-side, rgb(248 192 147 / 100%), rgb(248 192 147 / 0%));
  background-size:
    130vmax 130vmax,
    80vmax 80vmax,
    90vmax 90vmax,
    110vmax 110vmax,
    90vmax 90vmax;
  background-position:
    -80vmax -80vmax,
    60vmax -30vmax,
    10vmax 10vmax,
    -30vmax -10vmax,
    50vmax 50vmax;
  background-repeat: no-repeat;
  animation: 10s movement linear infinite;

  .login-box {
    padding: 24px 32px;
    box-sizing: border-box;
    width: 424px;
    border-radius: 20px;
    backdrop-filter: blur(5px);
    box-shadow: 0 0 30px 10px rgb(0 0 0 / 30%);

    .login-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .login-header-logo {
        // background: url('@assets/images/public/logo.png');
        background-size: 100%;
        background-repeat: no-repeat;
        width: 70px;
        height: 70px;
      }

      .login-header-title {
        color: #fff;
        font-size: 28px;
        font-style: italic;
        font-weight: 700;
        text-shadow: 2px 3px 1px #000;
      }
    }

    .login-main {
      .login-main-msg {
        line-height: 1.6;
        color: #fff;
        text-shadow: 1px 1px 1px #000;
        font-size: 18px;
        margin: 24px 0;
      }

      .v-code-input {
        width: 70%;
      }

      .v-code {
        width: 30%;
        height: 40px;
      }
    }
  }
}
</style>
